<template>
  <div class="login-container">
	  <div class="slogan"><img style="position: relative;" src="../assets/slogan.png" alt="avater"></div>
		  
	 
	  <div class="login-box" >
		  <!-- 用户头像区 -->
		  <div class="avater-box">
		     <img  class="Rotation" src="../assets/swpu.jpg" alt="avater">
	</div>
		  
		  <!-- 输入表单区 -->
			 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="login-form">
			    <el-form-item class="iconfont icon-user" prop="username">
					<el-input v-model="ruleForm.username"></el-input>
				</el-form-item>
				<el-form-item class="iconfont icon-3702mima" prop="password">
					<el-input v-model="ruleForm.password"  show-password></el-input>
				</el-form-item>
				<el-form-item class="btns">
					<el-button type="primary" @click="submitForm('ruleForm')">立即登陆</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
	</div>
	<div>
	<i :class="[audioPlaying === true ? 'el-icon-video-pause' : 'el-icon-video-play','playIcon' ]" @click="changeAudioState" style="font-size: 30px;color: white;margin: 20px;"></i>
    <audio id="audio" autoplay="autoplay" loop="loop"><source src="../assets/bgm.mp3" />您的浏览器不支持 audio 标签。</audio>
	</div>
  </div>
</template>

<script>
export default{
	data(){
		return{	
			audioPlaying:true,
			audio:'',
			 ruleForm: {
          username: 'admin',
          password: '123456'
        },
        rules: {
          username: [
            { required: true, message: '请输入登录名', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
          ],
          password: [
             { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
          ],
		  }
	};
	
},
    methods: {
		// 登录按钮事件
		  submitForm(formName) {
			  
			this.$refs[formName].validate((valid) => {
			  if (!valid) {
				return;
			  } 
			this.$http.post('login',this.ruleForm).then(res=>{
			var	result=res.data;
			  if(result.meta.status !== 200){
				   console.log(result)
				   return this.$message({
				  					message: result.meta.msg,
				  					type: 'error',
				  					center: true
				  				 })
				
			  }
			  else this.$message({
					message: result.meta.msg,
					type: 'success',
					center: true
				 })
				 console.log(result.data.token)
			  // 储存token到sessionStorage
			  window.sessionStorage.setItem("token",result.data.token);
			
			 this.$router.push('/home')
			});		
			});		
		  },
		  //重置按钮事件
		  resetForm(formName) {
			this.$refs[formName].resetFields();
		  },
		  changeAudioState(){
			  this.audioPlaying = !this.audioPlaying
			  var audio = document.getElementById("audio")
			         if( audio.paused )
			  					  audio.play()
			  					  else
			  					  audio.pause()

			 

			  
		  }
		},
		created() {
		

		}
}
</script>

<style lang="less" scoped="scoped">
	body{
		
	}
	.login-container{
		margin: 0;
		padding: 0;
		background: url('../assets/bgp.jpg');
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}
	.slogan{
	    left: 50%;
		position: absolute;
		transform:translate(-50%,0%);
	}
	@-webkit-keyframes rotation{
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
	}
	
	.Rotation{
	-webkit-transform: rotate(360deg);
	animation: rotation 10s linear infinite;
	-moz-animation: rotation 10s linear infinite;
	-webkit-animation: rotation 10s linear infinite;
	-o-animation: rotation 10s linear infinite;
	}
	.login-box{
		width: 500px;
		height: 300px;
		position: absolute;
		border-radius: 3px;
		left: 50%;
		top: 50%;
		background-color: whitesmoke;
		box-shadow: 0 5px 5px gray;
		opacity: 0.95;
		transform:translate(-50%,-50%);
		>.avater-box{
			width: 100px;
			padding: 5px;
			border-radius: 50%;
			background-color: white;
			left: 50%;
			top: 0%;
			position: absolute;
			transform: translate(-50%,-50%);
			box-shadow: 0 0 20px aliceblue;
			> img{
				border-radius: 50%;
				width: 100px;
				height: 100px;
			}
		}
	}
	.btns{
		display: flex;
		justify-content: center;
		> .el-button{
			width: 200px;
		}
	}
	.login-form{
		position: absolute;
		width: 100%;
		margin-top: 70px;
		padding: 0 20px;
		box-sizing: border-box;
		> .el-input{
		
		}
	}
    .icon-user:before,.icon-3702mima:before{
		color: #969896;
		position: absolute;
		z-index: 999;
		height:40px;
		line-height: 40px;
	}
	.playIcon{
		border-radius: 50%;
		padding: 0;
	}
	.playIcon:hover{
		text-shadow: 0 0 10px aliceblue;
	}
</style>
